<template>
    <Modal v-model="VINAptitudeModal" width="800" :closable="false" class-name="VIN-aptitude-modal outer-modal" :mask-closable="false">
        <div slot="header" >
            许可证VIN信息
            <Icon class="f-fr" type="ios-close" @click="closeModel"/>
        </div>
        <Form class="clearfix" :label-width="126" inline :model="VINDocData" ref="VINDocDataRef">
            <FormItem label="许可证类别">
                <Input disabled v-model="licTypeName" placeholder="许可证类别"></Input>
            </FormItem>
            <FormItem label="许可证编号">
                <Input disabled v-model="VINDocData.licenceNo" placeholder="许可证编号"></Input>
            </FormItem>
            <FormItem label="VIN序号" prop="vinNo">
                <Input v-model="VINDocData.vinNo" placeholder="VIN序号" @on-keyup="limitVinNoLen"></Input>
            </FormItem>
            <FormItem label="提运单日期" prop="billLadDate">
                <DatePicker :value="VINDocData.billLadDate" @on-change="v => VINDocData.billLadDate = v" type="date" placeholder="提运单日期" transfer></DatePicker>
            </FormItem>
            <FormItem label="质量保质期" prop="qualityQgp">
                <Input v-model="VINDocData.qualityQgp" placeholder="质量保质期"></Input>
            </FormItem>
            <FormItem label="车辆识别代码VIN" prop="vinCode">
                <Input v-model="VINDocData.vinCode" placeholder="车辆识别代码VIN"></Input>
            </FormItem>
            <FormItem label="发动机号或电机号" prop="motorNo">
                <Input v-model="VINDocData.motorNo" placeholder="发动机号或电机号"></Input>
            </FormItem>
            <FormItem label="发票号" prop="invoiceNo">
                <Input v-model="VINDocData.invoiceNo" placeholder="发票号"></Input>
            </FormItem>
            <FormItem label="发票所列数量" prop="invoiceNum">
                <Input v-model="VINDocData.invoiceNum" placeholder="发票所列数量"></Input>
            </FormItem>
            <FormItem label="品名（中文）" prop="prodCnnm">
                <Input v-model="VINDocData.prodCnnm" placeholder="品名（中文）"></Input>
            </FormItem>
            <FormItem label="品名（英文）" prop="prodEnnm">
                <Input v-model="VINDocData.prodEnnm" placeholder="品名（英文）"></Input>
            </FormItem>
            <FormItem label="型号（英文）" prop="modelEn">
                <Input v-model="VINDocData.modelEn" placeholder="型号（英文）"></Input>
            </FormItem>
            <FormItem label="底盘号" prop="chassisNo">
                <Input v-model="VINDocData.chassisNo" placeholder="底盘号"></Input>
            </FormItem>
            <FormItem label="单价" prop="pricePerUnit">
                <Input v-model="VINDocData.pricePerUnit" placeholder="单价"></Input>
            </FormItem>
        </Form>
        <div class="btn-box">
            <Button type="primary" @click="addHandle">新增</Button>
            <Button type="primary" @click="saveHandle">保存</Button>
            <Button type="primary" @click="removeHandle">删除</Button>
        </div>
        <div class="table-Modal">
            <Table
                border
                ref="table"
                :columns="tableColumns"
                :data="tableList"
                @on-row-click="selectDataHandle"
                @on-selection-change="handleSelectionChange"
            />
        </div>
        <div slot="footer">
            <Button type="default" @click="closeModel">取消</Button>
            <Button type="primary" @click="saveVINAptitude">确定</Button>
        </div>
    </Modal>
</template>

<script>
import formatTime from '@/libs/formatTime'
export default {
    name: 'VINAptitudeModal',
    data () {
        return {
            formatTime,
            VINAptitudeModal: false,

            currentAptitudeIndex: '', // 当前操作的许可证数据 goodsNo
            licTypeName: '',
            VINDocData: { // VIN 搜索数据结构
                numId: '', // 序号
                goodsLimitId: '',
                goodsLimitVinId: '',
                licTypeCode: '', // 许可证类别
                licenceNo: '', // 许可证编号
                vinNo: '', // VIN序号
                billLadDate: '', // 提/运单日期
                qualityQgp: '', // 质量保质期
                vinCode: '', // 车辆识别代码VIN
                motorNo: '', // 发动机号或电机号
                invoiceNo: '', // 发票号
                invoiceNum: '', // 发票所列数量
                prodCnnm: '', // 品名（中文）
                prodEnnm: '', // 品名（英文）
                modelEn: '', // 型号（英文）
                chassisNo: '', // 底盘(车架)号
                pricePerUnit: '' // 单价
            },

            tableList: [],
            tableColumns: [
                {
                    type: 'selection',
                    width: 30,
                    align: 'center'
                },
                {
                    type: 'index',
                    width: 50,
                    align: 'center',
                    title: '序号'
                },
                {
                    title: 'VIN序号',
                    width: 100,
                    align: 'center',
                    key: 'vinNo'
                },
                {
                    title: '提/运单日期',
                    align: 'center',
                    width: 120,
                    key: 'billLadDate'
                },
                {
                    title: '质量保质期',
                    width: 150,
                    key: 'qualityQgp',
                    align: 'center'
                },
                {
                    title: '发动机号或电机号',
                    width: 100,
                    align: 'center',
                    render (h, { row }) {
                        const v = row.motorNo
                        return h('span', {
                            domProps: {
                                innerHTML: v,
                                title: v
                            }
                        })
                    }
                },
                {
                    title: '车辆识别代码VIN',
                    width: 100,
                    align: 'center',
                    render (h, { row }) {
                        const v = row.vinCode
                        return h('span', {
                            domProps: {
                                innerHTML: v,
                                title: v
                            }
                        })
                    }
                },
                {
                    title: '底盘(车架)号',
                    width: 100,
                    align: 'center',
                    render (h, { row }) {
                        const v = row.chassisNo
                        return h('span', {
                            domProps: {
                                innerHTML: v,
                                title: v
                            }
                        })
                    }
                },
                {
                    title: '发票号',
                    width: 100,
                    align: 'center',
                    render (h, { row }) {
                        const v = row.invoiceNo
                        return h('span', {
                            domProps: {
                                innerHTML: v,
                                title: v
                            }
                        })
                    }
                },
                {
                    title: '发票所列数量',
                    width: 100,
                    align: 'center',
                    key: 'invoiceNum'
                },
                {
                    title: '品名（中文）',
                    width: 100,
                    align: 'center',
                    render (h, { row }) {
                        const v = row.prodCnnm
                        return h('span', {
                            domProps: {
                                innerHTML: v,
                                title: v
                            }
                        })
                    }
                },
                {
                    title: '品名（英文）',
                    width: 100,
                    align: 'center',
                    render (h, { row }) {
                        const v = row.prodEnnm
                        return h('span', {
                            domProps: {
                                innerHTML: v,
                                title: v
                            }
                        })
                    }
                },
                {
                    title: '型号（英文）',
                    width: 100,
                    align: 'center',
                    render (h, { row }) {
                        const v = row.modelEn
                        return h('span', {
                            domProps: {
                                innerHTML: v,
                                title: v
                            }
                        })
                    }
                },
                {
                    title: '单价',
                    width: 150,
                    align: 'center',
                    key: 'pricePerUnit'
                }
            ]
        }
    },
    methods: {
        init (arr) {
            this.VINAptitudeModal = true
            this.currentAptitudeIndex = arr[0].goodsNo
            this.VINDocData.licTypeCode = arr[0].licTypeCode
            this.licTypeName = arr[0].licTypeName
            this.VINDocData.licenceNo = arr[0].licenceNo
            this.VINDocData.goodsLimitId = arr[0].goodsLimitId

            let list = arr[0].customsGoodsLimitVins.slice()

            if (list.length > 0) {
                list.forEach((item, i) => {
                    item.numId = i + 1
                    let billLadDate = item.billLadDate ? String(item.billLadDate) : ''
                    // fix: 没有判断是否有有效的 billLadDate 直接进行格式化造成 时间显示错误的bug(TAPD:1021325)
                    if (billLadDate && billLadDate.indexOf('-') === -1) { // 如果是时间戳格式，需要转换为时间格式
                        item.billLadDate = formatTime.ymd(Number(billLadDate))
                    }
                })
                this.tableList = list
            } else {
                this.tableList = []
            }
            this.checkedTableList = []
            this.addHandle()
        },

        closeModel () {
            this.addHandle()
            this.VINAptitudeModal = false
        },

        saveHandle () {
            if (!this.VINDocData.vinNo) {
                this.$Message.warning('请输入VIN序号！')
                return false
            }

            if (this.VINDocData.vinNo.length > 5) {
                this.$Message.warning('VIN序号长度不能超过5位')
                return false
            }
            const index = this.VINDocData.numId ? this.VINDocData.numId - 1 : -1
            const target = this.tableList.findIndex((item, i) => item.vinNo == this.VINDocData.vinNo && index != i)
            if (target >= 0) {
                this.$Message.warning('VIN序号已存在，请重新输入！')
                return
            }
            // 新增保存 & 编辑保存
            let data = JSON.parse(JSON.stringify(this.VINDocData))
            if (index < 0) {
                data.numId = this.tableList.length + 1
                this.tableList.push(data)
            } else {
                this.tableList.splice(index, 1, data)
            }
            this.checkedTableList = []
            this.addHandle()
        },

        // 清空表单
        addHandle () {
            this.$refs['VINDocDataRef'].resetFields()
            this.VINDocData.goodsLimitVinId = ''
            this.VINDocData.numId = ''
        },

        // table  多选
        handleSelectionChange (list) {
            this.checkedTableList = list.slice()
        },
        selectDataHandle (data, index) {
            for (let i in this.VINDocData) {
                this.VINDocData[i] = data[i]
            }
            this.$refs.table.toggleSelect(index)
        },

        removeHandle () {
            const vinList = this.checkedTableList.map(item => item.vinNo)
            if (vinList.length === 0) {
                this.$Message.warning('请先选择要删除的数据!')
                return false
            }
            let list = this.tableList.filter(item => !vinList.includes(item.vinNo))
            // 重新排序
            list.forEach((item, i) => {
                item.numId = i + 1
            })
            this.tableList = list.slice()
            this.addHandle()
            this.checkedTableList = []
        },

        saveVINAptitude () {
            let res = {
                index: this.currentAptitudeIndex,
                list: this.tableList
            }
            this.$emit('saveVINAptitude', res)
            this.closeModel()
        },

        limitVinNoLen () {
            if (this.VINDocData.vinNo.length > 5) {
                this.$Message.warning('VIN序号长度不能超过5位')
                return false
            }
        }
    } // methods end
}
</script>

<style lang="less">
    .VIN-aptitude-modal {
        input {
            width: 210px !important;
        }

        .btn-box {
            margin-bottom: 10px;
            button {
                margin-right: 10px;
            }
        }

        .table-Modal {
            padding-bottom: 10px;
        }
    }
</style>
